<template>
    <div class="monitoring">
        <div class="monitoring-item" :style="{ width: 100 / props.row + '%' }" v-for="(item, index) in props.list" :key="index">
            <div class="left">
                <img class="back" :src="item.img" alt="" />
                <div class="info">
                    <img src="@/assets/images/基础/monitor/point_pic.png" alt="" />
                    <div class="name">{{ item.name }}</div>
                    <img class="goto" v-if="item.status == 0" src="@/assets/images/icon/goto.png" alt="" />
                </div>
                <div class="status">
                    <div class="item error" v-if="item.status == 0">
                        <img src="@/assets/images/icon/叹号.png" alt="" />
                        未解决
                    </div>
                    <div class="item success" v-else>
                        <img src="@/assets/images/icon/勾.png" alt="" />
                        已解决
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <img src="@/assets/images/icon/icon_位置_24.png" alt="" />
                    <div class="title">告警位置</div>
                    <div class="content">{{ item.location }}</div>
                </div>
                <div class="item">
                    <img src="@/assets/images/icon/icon_告警类型.png" alt="" />
                    <div class="title">告警类型</div>
                    <div class="content pass">{{ item.type }}</div>
                </div>
                <div class="item">
                    <img src="@/assets/images/icon/icon_抓拍时间.png" alt="" />
                    <div class="title">告警时间</div>
                    <div class="content">
                        <div>{{ item.time.split(' ')[0] }}</div>
                        <div>{{ item.time.split(' ')[1] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from '@/utils'

interface listType {
    img: string
    name: string
    location: string
    type: string
    time: string
    status: number
}

const props = defineProps({
    list: {
        type: Array<listType>,
        default: () => [
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '人员轨迹',
                location: 'PCR001',
                type: '拌线入侵',
                time: '2023-11-20 14:20:10',
                status: 0
            },
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '人员轨迹',
                location: 'PCR001',
                type: '拌线入侵',
                time: '2023-11-20 14:20:10',
                status: 1
            },
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '人员轨迹',
                location: 'PCR001',
                type: '拌线入侵',
                time: '2023-11-20 14:20:10',
                status: 1
            }
        ]
    },
    row: {
        type: Number,
        default: 3
    }
})
</script>

<style scoped lang="scss">
.monitoring {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
    padding: 0 0 20px 0;
    color: #fff;
    .monitoring-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: OPPOSans;
        height: 500px;
        .left {
            width: 70%;
            position: relative;
            overflow: hidden;
            .back {
                width: 100%;
                height: 300px;
                border-radius: 10px;
                cursor: pointer;
            }
            .info {
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                align-items: center;
                padding: 5px 5px 5px 10px;
                width: 100%;
                background-image: linear-gradient(180deg, #05080900 0%, #0d1e39 100%);
                font-size: 16px;
                img {
                    width: 20px;
                    height: 20px;
                }
                .name {
                    letter-spacing: 2px;
                }
                .goto {
                    position: absolute;
                    right: 10px;
                    width: 10px;
                    height: 16px;
                    cursor: pointer;
                }
            }
            .status {
                position: absolute;
                right: 10px;
                top: 10px;
                font-size: 16px;
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 80px;
                    padding: 5px;
                    border-radius: 20px;
                    background: rgba(0, 0, 0, 0.8);
                    img {
                        width: 15px;
                        height: 15px;
                    }
                }
                .error {
                    color: #c94043;
                }
                .success {
                    color: #179b6d;
                }
            }
        }

        .right {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0;
            font-family: OPPOSans;
            letter-spacing: 0.5px;
            font-size: 16px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }
                .title {
                    letter-spacing: 1px;
                    margin-right: 10px;
                }
                .content {
                    flex: 1;
                    height: 30px;
                    color: #89cbff;
                    div {
                        margin-bottom: 5px;
                    }
                }
                .pass {
                    color: #a84040;
                }
            }
        }
    }
}
</style>
